<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>BPMN Modeler</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>

</head>

<body>
<noscript>
    <strong>We're sorry but the BPMN modeler doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong>
</noscript>

<!-- 使用iframe加载本地BPMN模型编辑器 -->
<iframe
        th:src="@{/pear/component/bpmnModeler/index.html}"
        id="bpmnFrame"
        frameborder="0"
        width="100%"
        height="800px">
</iframe>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script>

    let xml = parent.xml
    // 等待iframe加载完成
    document.getElementById('bpmnFrame').onload = function () {
        // 初始化数据
        const initData = {
            xml: xml, // 初始XML内容
            users: [],
            groups: [],
            categorys: [],
            isView: true
        };

        // 向iframe发送初始化数据
        this.contentWindow.postMessage(initData, '*');
    };

    // 监听来自iframe的消息
    window.addEventListener('message', function (event) {
    });

</script>
</body>
</html>